<template>
  <view @click="openDialog" class="text-center fs-4 text-light" style="background-color: #EB344A;">
    {{ title }}
    <uni-popup ref="showTip" type="center" @change="change" class="text-dark">
      <view class="mx-auto col-10 col-lg-6 fs-6 bg-white text-dark rounded rounded-2">
        <view class="p-3">
          <view class="fs-5 fw-bold text-center">客服热线</view>
          <view class="mt-2 small">
            平安期货客户服务时间: 交易日8:30-02:30。
          </view>
          <view class="mt-2 fw-bold text-center" style="color: var(--bs-blue)">400-8888-933</view>
        </view>
        <view class="py-2 d-flex border-top">
          <text @click="cancel" class="col-6 text-center">取消</text>
          <text @click="makePhoneCall" class="border-start col-6 text-center" style="color: var(--bs-blue)">拨打</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  name: "CustomerService3",
  components: {
    uniPopup,
  },
  data() {
    return {
      phone: 4008888933,
    }
  },
  props: {
    title: {
      type: String,
      default: "title",
    },
  },
  methods: {
    openDialog() {
      this.$refs["showTip"].open()
    },
    change(e) {
      console.log('是否打开:' + e.show)
    },
    cancel() {
      this.$refs['showTip'].close()
    },
    makePhoneCall(type) {
      this.$refs['show' + type].close();
      uni.makePhoneCall({
        phoneNumber: this.phone,
        success: (res) => {
          console.log('调用成功!')
        },
        fail: (res) => {
          console.log('调用失败!')
        }
      })
    },
  }
}
</script>

<style>
</style>
